<template>
  <div class="my-message-container">
    <span class="time">提交时间: {{ message.create_time }}</span>
    <p class="message-item">
      提交的内容: {{ message.content }}
      <i class="el-icon-delete" @click="handleDelMessage"></i>
    </p>
  </div>
</template>
<script>
// 子组件接收父组件的信息通过什么去传?

import Api from "../api";

// props
export default {
  name: "MessageItem",
  props: {
    message: {
      type: Object,
      default: () => ({
        message_id: "",
        user_id: "",
        content: "",
        create_time: "",
      }),
    },
  },
  methods: {
    async handleDelMessage() {
      this.$confirm("此操作将永久删除该留言, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await Api.apiDelMessage({
            message_id: Number(this.message.message_id),
          });
          if (res.code === 1) {
            //   删除成功了
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // 子组件通知父组件，使用this.$emit(事件名,你要传的数据)
            this.$emit("delMessageSuccess");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.my-message-container {
  .time {
    text-align: center;
    font-size: 12px;
    margin: 10px 0;
  }
  .message-item {
    width: 70%;
    background-color: #fff;
    border-radius: 4px;
    border: #e2e2e2 solid 1px;
    font-weight: bold;
    min-height: 30px;
    padding: 15px;
    text-align: left;
    position: relative;
    .el-icon-delete {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: -5px;
      right: -5px;
      font-size: 20px;
      background-color: red;
      border-radius: 50%;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>
